<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<block>
			<uni-popup ref="show_app_auth" :zIndex="9" type="top" :uniPopupOutside="false" :custom="true" :style="{top:isAdd?`${configInfo.navBarHeight}px`:`0px`}">
				<view class="open-content pd-md radius-16 ml-lg mt-md rel" :style="{background: primaryColor}" @tap="toConfirmAppAuth('cancel')">
					<!-- <view @tap.stop="toConfirmAppAuth('cancel')" class="open-close flex-center abs">
						<i class="iconfont icon-add c-base"></i>
					</view> -->
					<view class="flex-y-center f-paragraph c-base text-bold">{{newTypeArr[type].title}}</view>
					<view class="f-desc c-base mt-sm">{{newTypeArr[type].tips}}</view>
				</view>
			</uni-popup>
		</block>
		<!-- <block>
			<uni-popup ref="show_app_auth" type="center" :custom="true">
				<view class="common-popup-content fill-base pd-lg radius-34">
					<view class="title">权限说明</view>
					<view class="desc">
						{{typeArr[type]}}
					</view>
					<view class="button">
						<view @tap.stop="toConfirmAppAuth('cancel')" class="item-child">禁止</view>
						<view @tap.stop="toConfirmAppAuth('confirm')" class="item-child c-base"
							:style="{background: primaryColor,color:'#fff'}">允许</view>
					</view>
				</view>
			</uni-popup>
		</block> -->
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		components: {},
		props: {
			isAdd: {
				type: Boolean,
				default () {
					return true
				}
			},
			type: {
				type: String,
				default () {
					return 'location'
				}
			},
		},
		async mounted() {
			let [,data] = await uni.getSystemInfo()
			this.plus = data
		},
		data() {
			return {
				typeArr: {
					location: '对定位权限申请说明：便于您使用该功能获取位置信息，用于获取当前位置信息、选择地址等',
					phone: '对拨打电话权限申请说明：便于您使用该功能拨打电话，用于联系客服',
					save: '对存储权限申请说明：便于您使用该功能保存图片到相册',
					image: '对照片/相机权限申请说明：便于您使用该功能上传您的照片，用于更换用户头像',
					upload: '对照片/相机/摄像头权限申请说明：便于您使用该功能上传您的照片/图片/视频，用于更换用户头像、服务人员资格证书、工作形象照、个人生活照、个人视频介绍、申述/退款时提交反馈图片等'
				},
				newTypeArr: {
					upload: {
						title: '对照片/相机/摄像头权限申请说明',
						tips: '便于您使用该功能上传您的照片/图片/视频，用于更换用户头像、服务人员资格证书、工作形象照、个人生活照、个人视频介绍、申述/退款时提交反馈图片等'
					},
					location: {
						title: '位置权限使用说明',
						tips: '便于您使用该功能获取位置信息，用于获取当前位置信息、选择地址等'
					},
					phone: {
						title: '对拨打电话权限申请说明',
						tips: '便于您使用该功能拨打电话，用于联系客服'
					},
					save: {
						title: '对存储权限申请说明',
						tips: '便于您使用该功能保存图片到相册'
					},
					image: {
						title: '对照片/相机权限申请说明',
						tips: '便于您使用该功能上传您的照片，用于更换用户头像'
					}
				},
				plus: {}
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo
		}),
		methods: {
			...mapActions(['getConfigInfo', 'getUserInfo']),
			...mapMutations(['updateUserItem']),
			open() {
				this.$refs.show_app_auth.open()
			},
			close() {
				this.$refs.show_app_auth.close()
			},
			toConfirmAppAuth(key) {
				this.close()
				this.$emit(key)
			}
		},
	}
</script>

<style scoped lang="scss">
	.open-content{
		width: 690rpx;
		.open-close {
			top: 0;
			right: 0;
			width: 40rpx;
			height: 40rpx;
			background: #C0C0C0;
			border-radius: 0 16rpx 0 16rpx;
		
			.iconfont {
				font-size: 24rpx;
				transform: rotate(45deg);
			}
		}
	}
</style>